<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Layout 布局</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">

  <link rel="stylesheet" href="../../assets/gougu/css/gougu.css">
</head>

<body>

  <style>
    /* 这段样式只是用于演示，可删除 */
    #layout .layui-card-body {
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      height: 100px;
    }
  </style>

  <div class="p-3" id="layout">
    <!-- 两列 -->
    <div class="pb-2 black">两列</div>
    <div class="layui-row layui-col-space12">
      <div class="layui-col-xs6">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs6">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
    </div>
    <div class="layui-row layui-col-space12">
      <div class="layui-col-xs3">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs9">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-row layui-col-space12">
        <div class="layui-col-xs9">
          <div class="layui-card">
            <div class="layui-card-header"></div>
            <div class="layui-card-body"></div>
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="layui-card">
            <div class="layui-card-header"></div>
            <div class="layui-card-body"></div>
          </div>
        </div>
      </div>
    </div>
    <!--三列 -->
    <div class="py-2 black">三列</div>
    <div class="layui-row layui-col-space12">
      <div class="layui-col-xs4">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs4">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs4">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs3">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs3">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs6">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs6">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs3">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs3">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
    </div>
    <!--四列 -->
    <div class="py-2 black">四列</div>
    <div class="layui-row layui-col-space12">
      <div class="layui-col-xs3">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs3">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs3">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs3">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
    </div>
    <!--五列 -->
    <div class="py-2 black">五列</div>
    <div class="layui-row layui-col-space12">
      <div class="layui-col-xs2">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs2">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs2">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs3">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs3">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs3">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs3">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs2">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs2">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs2">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
    </div>
    <!--六列 -->
    <div class="py-2 black">六列</div>
    <div class="layui-row layui-col-space12">
      <div class="layui-col-xs2">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs2">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs2">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs2">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs2">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
      <div class="layui-col-xs2">
        <div class="layui-card">
          <div class="layui-card-header"></div>
          <div class="layui-card-body"></div>
        </div>
      </div>
    </div>

    <script>
      const moduleInit = ['tool'];
      function gouguInit() {

      }
    </script>
  <script src="../../assets/layui/layui.js"></script>
  <script src="../../assets/gougu/gouguInit.js"></script>
</body>

</html>